<template>
  <div>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索和添加 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入搜索权限名称" class="input-with-select" v-model="queryInfo.menuName" clearable @clear="getAllMenuList">
            <el-button slot="append" icon="el-icon-search" @click="getAllMenuList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showMenuEditDialog">添加权限</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表 -->
      <el-table :data="menuList" border stripe>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="父节点" >
          <template slot-scope="scope">
            {{scope.row.parentId?'':scope.row.menuName}}
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            {{scope.row.parentId?scope.row.menuName:''}}
          </template>
        </el-table-column>
        <el-table-column label="排序" >
          <template slot-scope="scope">
            <el-input v-model="scope.row.sortNum" @change="setOrderNum(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="url" prop="menuUrl"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary"  size="mini" @click="showMenuEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger"  size="mini" @click="deleteMenu(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加用户的对话框 -->
    <el-dialog title="权限编辑" :visible.sync="saveDialogVisible" width="50%" @close="saveDialogClosed">
      <el-form :model="saveForm" :rules="saveFormRules" ref="saveFormRef" label-width="70px" class="demo-ruleForm">
        <el-form-item label="名称" prop="menuName">
          <el-input v-model="saveForm.menuName"></el-input>
        </el-form-item>
        <el-form-item label="Url" prop="menuUrl">
          <el-input v-model="saveForm.menuUrl"></el-input>
        </el-form-item>
        <el-form-item label="Icon" prop="icon">
          <el-input v-model="saveForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="父节点" prop="parentId">
          <el-select v-model="saveForm.parentId" placeholder="请选择父节点" clearable>
            <el-option
                    v-for="parentMenu in parentMenuList"
                    :key="parentMenu.id"
                    :label="parentMenu.menuName"
                    :value="parentMenu.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sortNum">
          <el-input v-model="saveForm.sortNum" placeholder="用于菜单按顺序显示，只能输入数字"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveDialogClosed">取 消</el-button>
        <el-button type="primary" @click="saveMenu">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api/Api.js'
export default {
  data() {
    return {
      // 查询用户列表的参数对象
      queryInfo: {
        menuName: '',
        pagenum: 1, // 页码
        pagesize: 5, // 页大小
      },
      menuList: [],
      parentMenuList:[],
      total: 0,
      saveDialogVisible: false,
      // 添加用户的表单数据对象
      saveForm: {
        id:'',
        menuName: '',
        menuUrl: '',
        parentId: '',
        sortNum:'',
      },
      // 添加用户的校验规则
      saveFormRules: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur',
          },
        ]
      }
    }
  },
  created() {
    this.getAllMenuList();
  },
  methods: {
    getAllMenuList(){
      Api.menuList({menuName:this.queryInfo.menuName}).then(res =>{
        if (res.success) {
          this.menuList = res.data
        } else {
          return this.$message.error('获取权限父节点列表失败')
        }
      });
    },
    getParentMenuList(){
      Api.menuList({'parentStatus':1}).then(res =>{
        if (res.success) {
          this.parentMenuList = res.data
        } else {
          return this.$message.error('获取权限父节点列表失败')
        }
      });
    },
    setOrderNum(row){
      Api.setMenuSortNum({id:row.id,sortNum:row.sortNum}).then(res => {
        if (res.success) {
          this.getAllMenuList();
        } else {
          return this.$message.error(res.msg)
        }
      })
    },
    // 监听添加用户对话框的关闭事件
    saveDialogClosed() {
      this.saveDialogVisible = false;
      this.$refs.saveFormRef.resetFields();
      this.saveForm = {
        id:'',
        menuName: '',
        menuUrl: '',
        parentId: '',
        sortNum:''
      }
    },
    // 显示编辑用户对话框
    showMenuEditDialog(row) {
      if(row){
        this.saveForm = JSON.parse(JSON.stringify(row));
      }else{
        this.saveForm = {
          id:'',
          menuName: '',
          menuUrl: '',
          parentId: '',
          sortNum:''
        }
      }
      this.getParentMenuList();
      this.saveDialogVisible = true;
    },
    saveMenu() {
      this.$refs.saveFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        Api.saveMenu(this.saveForm).then(res => {
            if (res.success) {
              this.saveDialogVisible = false
              this.$message.success('操作成功！')
              this.getAllMenuList();
            } else {
                return this.$message.error('操作失败: ' + res.msg)
            }
        })
      })
    },
    // 监听修改用户对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    deleteMenu(id) {
      this.$confirm('确定要删除该菜单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          Api.deleteMenu({id:id}).then(res => {
            if (res.success) {
              this.$message.success('操作成功！')
              this.getAllMenuList();
            } else {
              return this.$message.error('操作失败: ' + res.msg)
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    }
  },
}
</script>

<style lang="less" scoped>
</style>
